<template>
	<view class="wrap">
		<block v-if="!isPayFlag">
			<view class="modItem">
				<view class="modTit">团队基本信息</view>
				<view class="modCon">
					<block v-if="hasGroupFlag">
						<view class="info spaceBet" @tap="switchOgzName">
							<view class="left">
								<view class="ogzName">{{groupName}}</view>
								<view>{{groupPerson}}<text class="lineView">|</text>{{groupPhone}}</view>
							</view>
							<view class="iconfont icon-gengduo"></view>
						</view>
					</block>
					<block v-else-if="hasGroupFlag == false">
						<view class="noData" @tap="goAdd">
							<text>暂无团队信息,</text>
							<text class="addBtn">请添加</text>
						</view>
					</block>
				</view>
			</view>
			<view class="modItem spaceBet" style="padding: 0 20rpx;" @tap="setGroupNums">
				<view class="tit">团体人数</view>
				<view class="setNum hasFlex">
					<!-- hasSet -->
					<view class="setTxt" :class="[num > 0 ? 'hasSet' : '']">{{setNums}}</view>
					<view class="iconfont icon-gengduo"></view>
				</view>
			</view>
			<view class="modItem" @tap="viewBuyItems">
				<view class="modTit">商品信息</view>
				<view class="modCon hasPadd spaceBet">
					<view class="coverImg">
						<image class="samePar" src="../../../static/images/groupService/ttIimg.png"></image>
					</view>
					<view class="modConDet">
						<view class="courseName ellip">{{pkgName}}</view>
						<!-- <text class="viewTxt">(查看)</text> -->
						<view>包含{{serviceNum}}个项目</view>
						<view class="price">价格需与机构商议</view>
					</view>
				</view>
			</view>
			<view class="tips">注:提交订单成功后,后台会根据双方沟通结果去修改团体服务套餐价格,您需要在"我的-团体订单-待付款"中支付即可</view>
			<button class="comBtn hasBotFixed noBorRad" :disabled="isDisabledFlag" @tap="goAddGroupOrder">提交订单</button>
		</block>
		<block v-else>
			<view class="payRes wholeWh">
				<image class="payImg" src="../../../static/images/groupService/coursePaySucc.png"></image>
				<view class="payTit">订单提交成功</view>
				<view class="tips padd">后台会根据双方沟通结果去修改团体服务套餐价格,您需要在"我的-团体订单-待付款"中支付即可</view>
				<button class="comBtn" @tap="backGsList">返回</button>
			</view>
		</block>
	</view>
</template>

<script>
	import { getServicePkgInfo,addGroupOrder } from '@/api/group/index'
	export default {
		data(){
			return{
				tOgzId:'',
				hasGroupFlag:null,
				groupName:'',
				groupPerson:'',
				groupPhone:'',
				setNums:'请设置团体人数',
				num:0,
				// popupShow:false,
				// radiusFlag:true,
				isPayFlag:false,
				pkgId:'',
				serviceIdStr:'',
				pkgName:'',
				serviceNum:0,
				isDisabledFlag:false
				
			}
		},
		onLoad(options){
			this.pkgId = options.pkgId;
			this.serviceIdStr = options.serviceIdStr;
			this.loadServicePkgInfo();
		},
		onUnload(){
			//uni.removeStorageSync('groupField');
		},
		methods:{
			onBackPress(options) {
				if(this.isPayFlag){
					if(options.from == 'navigateBack'){
						return false;
					}
					this.backGsList();
					return true;
				}
			},
			backGsList(){
				uni.navigateBack({
					delta:2
				})
			},
			goAddGroupOrder(){
				if(this.groupName == ''){
					this.util.showToast('请添加团队信息');
					return;
				}
				if(this.setNums == '请设置团体人数'){
					this.util.showToast('请设置团体人数');
					return;
				}
				uni.showLoading({title:'订单提交中...', mask: true });
				this.isDisabledFlag = true;
				var field = {objId:this.pkgId,tOgzId:this.tOgzId,tOgzName:this.groupName,tOgzLxr:this.groupPerson,tOgzMobile:this.groupPhone,num:this.num};
				if(this.pkgId == ''){
					var tmpField = {serviceStr:this.serviceIdStr}
					Object.assign( field,tmpField )
				}
				//console.log(field)
				addGroupOrder(field).then(res=>{
					this.util.showToastSuc('提交成功');
					uni.setNavigationBarTitle({
						title:'提交成功'
					})
					setTimeout(()=>{
						this.isPayFlag = true;
					},1500)
				}).catch(err=>{
					this.isDisabledFlag = false;
					console.log(err)
				});
			},
			//获取团体提交订单信息
			loadServicePkgInfo(){
				uni.showLoading({title:'加载中...', mask: true });
				var field = { pkgId:this.pkgId,serviceId:this.serviceIdStr};
				getServicePkgInfo(field).then(res=>{
					//console.log(res)
					this.hasGroupFlag = res.data.datas.groupName == '' ? false : true;
					this.groupName = res.data.datas.groupName;
					this.groupPerson = res.data.datas.groupLxr;
					this.groupPhone = res.data.datas.groupTel;
					this.pkgName = res.data.datas.pkgName;
					this.serviceNum = res.data.datas.serviceNum;
					this.tOgzId = res.data.datas.groupId;
				}).catch(err=>{
					console.log(err)
				});
			},
			//查看购买项目服务
			viewBuyItems(){
				this.popupShow = true;
			},
			hidePopup(){
				this.popupShow = false;
			},
			//起初存在机构
			switchOgzName(){
				this.commonJumpPage('editInfo');
			},
			//不存在机构
			goAdd(){
				// var field = { groupName:this.groupName,groupPerson:this.groupPerson,groupPhone:this.groupPhone };
				// uni.setStorageSync('groupField',field);
				this.commonJumpPage('addInfo');
			},
			//设置团体人数
			setGroupNums(){
				this.commonJumpPage('setNum');
			},
			//公共跳转
			commonJumpPage(currType){
				uni.navigateTo({
					url:'../setGroupInfo/setGroupInfo?currType=' + currType
				})
			}
		}
	}
</script>

<style lang='scss'>
	.payRes{
		background: #fff;
		text-align: center;
		.payImg{
			width: 162rpx;
			height: 162rpx;
			margin: 200rpx 0 30rpx;
		}
		.payTit{
			font-size: $font-size34;
			color: $pss-text-color3;
			margin-bottom: 20rpx;
			font-weight: bold;
		}
		.tips{
			font-size: $font-size28;
			color: $pss-text-color8;
		}
		.comBtn{
			width: 600rpx;
			margin:100rpx auto 0;
			background: #fff;
			border-radius: 50rpx;
			color: $pss-color-green;
			border: 1rpx solid $pss-color-green;
		}
	}
	.popuoView{
		position: relative;
		z-index: 10001;
		.popupTop{
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			font-size: $font-size32;
			color: $pss-text-color3;
			border-bottom: 1rpx solid #eee;
			font-weight: bold;
		}
		.popupCon{
			padding: 0rpx 30rpx 100rpx;
			.buyItems{
				font-size: $font-size28;
				height: 90rpx;
				line-height: 90rpx;
				border-bottom: 1rpx solid #eee;
				color: #03c797;
			}
		}
	}
	.hasPadd{
		padding: 30rpx 20rpx;
	}
	.icon-gengduo{
		font-size: $font-size26;
		color: $pss-text-colora;
	}
	.tips{
		font-size: $font-size26;
		color: $pss-color-primary_1;
	}
	.modItem{
		background: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		.setTxt{
			color: $pss-text-colora;
			font-size: $font-size28;
			margin-right: 10rpx;
			&.hasSet{
				font-size: $font-size32;
				color: $pss-color-primary_1;
				font-weight: bold;
			}
		}
		.modTit,
		.tit{
			height: 90rpx;
			line-height: 90rpx;
			font-size: $font-size32;
			color: $pss-text-color3;
			font-weight: bold;
		}
		.modTit{
			border-bottom: 1rpx solid #eee;
			padding: 0 20rpx; 
		}
		.setNum{
			align-items: center;
		}
		.modConDet{
			width: 78%;
			height: 140rpx;
			color: $pss-text-colora;
			font-size: $font-size26;
			.viewTxt{
				margin-left: 5rpx;
				color:#03c797 ;
			}
			.courseName{
				font-size: $font-size32;
				font-weight: bold;
				color: $pss-text-color3;
				margin-bottom: 10rpx;
			}
			.price{
				color: $pss-color-red;
				font-size: 28rpx;
				font-weight: bold;
				margin-top: 25rpx;
			}
		}
		.coverImg{
			width: 140rpx;
			height: 140rpx;
			margin-right: 15rpx;
			flex-shrink: 0;
		}
		.info{
			padding: 30rpx 20rpx;
			align-items: center;
			.left{
				font-size: $font-size26;
				color: $pss-text-colora;
				.ogzName{
					font-size: $font-size30;
					color: $pss-text-color3;
					margin-bottom: 10rpx;
				}
				.lineView{
					margin: 0 10rpx;
				}
			}
		}
		.noData{
			text-align: center;
			padding: 50rpx 0;
			font-size: $font-size28;
			color: $pss-text-colora;
			.addBtn{
				color: #03c797;
			}
		}
	}
	.wrap{
		padding: 20rpx 30rpx 0;
	}
	page{
		background: $pss-bg-primary;
	}
</style>